<template>
  <div class="sidebar-container">
    <div class="logo">
      <!--      让图片圆角展示-->
      <img src="../../assets/4.jpg" alt="暂无图片" style="width: 70px; height: 70px; border-radius: 50%">
    </div>
    <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :background-color="bgColor"
        :text-color="textColor"
        :active-text-color="activeTextColor"
        router
    >
      <template v-for="(item, index) in menuItem" :key="index">
        <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
          <template #title>
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex" :index="child.path">
            <i :class="child.icon"></i>
            <span>{{ child.title }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
      <div style="margin-left: 20px;color:#fff;margin-top: 20px;font-size: 14px;cursor: pointer;" @click = "check_work">工作台</div>
      <div style="margin-left: 20px;color:#fff;margin-top: 40px;font-size: 14px;cursor: pointer;" @click = "application">申请记录</div>
    </el-menu>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {ElMenu, ElMenuItem, ElSubMenu} from 'element-plus';
import axios from "axios";
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
// let user_name = route.query.name
// let xid = route.query.id
// console.log("===========")
// console.log(xid)
const bgColor = ref('rgba(152, 172, 178, 0.8)');
const textColor = ref('#fff');
const activeTextColor = ref('#000');

const defaultActive = ref('2'); // 动态设置默认激活项
const menuItem = ref([]);
let menu_list=ref([])
// const menuItems=route.query.menulist

const handleOpen = (key, keyPath) => {
  try {
    console.log(`展开: ${key}`, keyPath);
    // 在这里添加展开时的逻辑
  } catch (error) {
    console.error('展开菜单时发生错误:', error);
  }
};

const handleClose = (key, keyPath) => {
  try {
    console.log(`收缩: ${key}`, keyPath);
    // 在这里添加收缩时的逻辑
  } catch (error) {
    console.error('收缩菜单时发生错误:', error);
  }
};

// 处理菜单数据
const processMenuData = (data) => {
  const map = {};
  data.forEach(item => {
    if (!map[item.pname]) {
      map[item.pname] = {
        title: item.pname,
        path: item.pname.toLowerCase().replace(/ /g, '-'),
        icon: 'el-icon-s-tools', // 可以根据需要设置图标
        children: []
      };
    }
    map[item.pname].children.push({
      title: item.name,
      path: item.url,
      icon: 'el-icon-s-custom' // 可以根据需要设置图标
    });
  });

  return Object.values(map);


};
// 添加工作台配置
const check_work=()=>{
  router.push("/check_work")
}
// 员工查看申请记录
const application=()=>{
  router.push("/application")
}
onMounted(() => {
  // axios.get(`http://localhost:8000/app/resource/${xid}/get_menulist`)
  //     .then(res => {
  //       console.log(res.data);
  //     })
  //     .catch(error => {
  //       console.error('获取菜单列表时发生错误:', error);
  //     });
  menu_list.value = JSON.parse(localStorage.getItem('menulist'))
  menuItem.value = processMenuData(menu_list.value);
  localStorage.setItem("menuItems",JSON.stringify(menuItem.value))

}
);
</script>

<style>
.sidebar-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: rgba(220, 226, 226, 0.956);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  backdrop-filter: blur(10px); /* 背景模糊效果 */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: transform 0.3s ease; /* 过渡效果 */
}
.sidebar-container::-webkit-scrollbar {
  width: 2px; /* 滚动条宽度 */
}
.logo {
  text-align: center;
  background-color: rgba(152, 172, 178, 0.8);
  padding: 20px 0; /* 调整内边距 */
  border-right: none; /* 移除边框 */
}

.el-menu-vertical-demo {
  height: 100%;
  border: 0;
  flex-grow: 1; /* 确保菜单占据剩余空间 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.el-menu-item {
  background-color: transparent !important; /* 移除背景颜色 */
  border-radius: 5px; /* 圆角 */
  transition: background-color 0.3s ease; /* 过渡效果 */
}


.el-menu-item.is-active {
  background-color: #e0e0e0 !important; /* 激活状态背景颜色 */
}
</style>
